<script>
import { Plus } from '@element-plus/icons-vue'
import { addBannerFn} from '@/api/banner'
export default {
    data() {
        return {
            imageUrl: '',
            state: {
                img: '',
                alt: '',
                link: ''
            }
        }
    },   
    methods: {
        changeImage(uploadFile) {
            // console.log(123456789, uploadFile.raw);

            // 1. 根据选择的图片文件 来创建一个 url 地址
            // this.imageUrl = URL.createObjectURL(uploadFile.raw)

            // 2. 将图片转换成 base64 的格式进行使用

            // 创建一个文件的加载器
            let reader = new FileReader()
            // 读取文件成 base64
            reader.readAsDataURL(uploadFile.raw)
            // 文件读取成功之后的回调函数
            reader.onload = () => {
                // 将读取成功的 base64 保存起来
                this.imageUrl = reader.result
                // 发送给后端的时候需要使用
                this.state.img = reader.result
            }

        },
        addBannerClick() {
            /*
                上传图片通常有使用两种方法
                方案一：将图片作为文件直接传递给一个存储文件的服务器，服务器会返回一个图片的地址，
                将返回的图片地址传递给自己的服务器做保存。(自己服务器保存的是图片的地址)

                方案二：将图片转换成 base64 直接发给服务器做保存，如果图片多的情况下会导致服务器内存
                消耗严重，所以一般不推荐使用该方法。
            */

            // console.log(this.state);
            addBannerFn(this.state).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    // 清除表单数据
                    this.state = {
                        alt: '',
                        link: '',
                        img: ''
                    }
                    this.$router.push('/banner/bannerList')
                }
            })
       }
    },      
    components: {
        Plus
    }
}
</script>
<template>
    <div>
        <h3>添加轮播图</h3>
        <!-- <input type="file"> -->

        <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="changeImage"
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
         <el-input v-model="state.alt" placeholder="请输入 alt" />
          <el-input v-model="state.link" placeholder="请输入 link" />

          <el-button @click="addBannerClick">添加</el-button>
    </div>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>addBannerFn, 